<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello_react</title>
</head>
<body>
    <!--   准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom 用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript"  src="../js/babel.min.js"></script>
    
    
    <!--表示我写的不再是js而是jsx，靠babel来把js翻译为jsx-->
    <script type="text/babel"> //此处一定要写babel

        /*
        一定注意区分 【js语句（代码）】与【js表达式】
        1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            下面这些都是表达式：
                （1）. a
                （2）.  a+b
                (3). demo(1)  函数调用表达式
                （4） arr.map有返回值，所以也是一个表达式
                        let arr=[1,3,5,7,9]
                        let result = arr.map((num)=>{
                            //函数体
                            return num+1
                        })
                        console.log(result)
               （5）function test(){}
                就是定义一个const x = ...   x能接到值就是表达式，接不到值就不是表达式
        2. 语句（代码）
                        下面这些都是语句或者称之为代码
                        （1） if(){}
                        (2) for(){}
                        (3) switch(){case:***}
        */
       //模拟一些数据
       const data = ['angular', 'react', 'vue'] 
       //const data2 = [<li>angular</li>,<li>react</li>, <li>vue</li>]
       //const obj = {name1:'angular', name2: 'react', name3: 'vue'}
       //
       //创建虚拟DOM
       const VDOM = (
           <div>
            <h1>
                前端JS框架
                </h1> 
            <ul>
                {
                    //这个位置只能写JS表达式
                    //遍历的时候列表里面的元素都得有一个唯一的key值，以为react要把虚拟DOM和真实DOM做diff
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
               
                </ul>
           </div>
       )
       //渲染虚拟DOM到页面
       ReactDOM.render(VDOM,document.getElementById("test"))
    </script>
</body>
</html>